import React, { useState } from 'react';
import { message, Modal } from 'antd';
import { ModalForm, ProFormText, ProFormMoney, ProFormSelect } from '@ant-design/pro-form';
import { updateStatus } from '../../adminList/service';
import { ExclamationCircleOutlined } from '@ant-design/icons';

const confirm = (title = '', callback = () => { }) => Modal.confirm({
    title: title + '确认',
    icon: <ExclamationCircleOutlined />,
    content: '是否确认' + title + '此用户?',
    okText: '确认',
    cancelText: '取消',
    onOk() {
        callback();
    },
});

const Handle = React.forwardRef(({ callback = () => { } }: { callback?: (type: string) => any }, ref) => {
    const [modalVisible, handleModalVisible] = useState<boolean>(false);
    const [currentRow, setCurrentRow] = useState<any>({ balance: 0 });
    const [handleType, setHandleType] = useState<string>('');

    const formHandle = (bool: boolean, value: any, tip: string = '') => {
        setCurrentRow(value);
        handleModalVisible(bool);
        if (tip) message.success(tip);
    };

    // 操作
    const handle = async (type: string, key: string, data?: any) => {
        try {
            setHandleType(type);

            switch (type) {
                case 'enable': // 启用
                    if (data && data.status == 2) {
                        confirm('启用', () => {
                            updateStatus({ guid: key, status: 1 }).then(() => {
                                message.success('启用成功');

                                callback(type);
                            });
                        });
                    }
                    break;
                case 'disable': // 禁用
                    if (data && data.status == 1) {
                        confirm('禁用', () => {
                            updateStatus({ guid: key, status: 2 }).then(() => {
                                message.success('禁用成功');

                                callback(type);
                            });
                        });
                    }
                    break;
                default:
                    console.log('未定义操作类型--', type, data);
                    return;
            }
        } catch (error) {
            console.log('error----', error);
        }
    };

    // 定义向外暴露的数据内容
    React.useImperativeHandle(ref, () => ({
        handle
    }));

    return (
        <div>
            {/* 确认 */}
            <ModalForm
                title="确认"
                width="600px"
                visible={modalVisible}
                onVisibleChange={handleModalVisible}
                initialValues={{
                    ...currentRow,
                }}
                modalProps={{ destroyOnClose: true }}
                onFinish={(value) => handle(handleType, currentRow.guid, { ...currentRow, ...value })}
            >
                {/* 充值 */}
                {handleType == 'recharge' && (
                    <>
                        <ProFormText label="账户编号" name="guid" width="md" disabled />
                        <ProFormMoney
                            label="金额/数量"
                            name="num"
                            fieldProps={{
                                moneySymbol: false,
                            }}
                            rules={[
                                {
                                    required: true,
                                    message: '请输入金额/数量',
                                },
                            ]}
                            locale="en-US"
                            min={1}
                            width="md"
                        />
                        <ProFormText width="md" name="remarks" label="备注" />
                    </>
                )}
            </ModalForm>
        </div>
    );
},
);

export default Handle;
